import React, { useEffect, useState } from "react";
import { Container,ListGroup } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import ChatHelper from '../../../helper/chat/Chathelper';
import "./index.css"
import ChatService from "../../../services/chatservice";
import { PopupDialog } from "../../../components/common";
import { UserHelper } from "../../../helper";

interface ChatConversationModel{
    name:string,
    lastmsg?:string,
    lastmsgtime?:string,
    unreadmsgCount?:number
}

interface ChatConversationProps{
    conversationList?:Array<ChatConversationModel>
}

const ChatConversation:React.FC<ChatConversationProps> = (props:ChatConversationProps)=> {
    
    const navigate = useNavigate();
    const [conversationList,setConversationList] = useState(props.conversationList);
    const textareaID = "chat-input-textarea";

    useEffect(()=>{
        setupTextArea();
        getConversations();
        ChatHelper.setupSocket({
            onConnected:()=>{
                console.debug(2);
            },
            onError:()=>{

            }
        });
    },[])


    const getConversations = ()=> {
        ChatService.getConversations({fromid:UserHelper.getCachedUserInfo().userid||""}).then((cvs)=>{
            setConversationList(cvs);
        }).catch((err)=>{
            PopupDialog.showBsError(err);
        })
    }

    const setupTextArea = ()=> {
        var textArea = document.getElementById(textareaID);
        if(textArea){
            textArea.setAttribute("rows","1");
            textArea.oninput = (e:Event)=>{
                textArea?.setAttribute("style",`height:auto;`);
                textArea?.setAttribute("style",`height:${textArea?.scrollHeight-10}px;`);
            }    
        }
    }

    const onPressItem = (item:any)=> {
        navigate("/chat/dialog",{state:{
            from:item.from,
            contact:{
                userid:item.to,
                nickname:item.name
            }
        }});
    }

    return (<Container fluid id ='conversation' className="d-flex flex-column m-0 p-0 root-container">
        <ListGroup className="d-flex flex-column conversation-container m-0">
            {conversationList?.map((item,idx)=>{
                return (<ListGroup.Item key={`chat-conversation-item-${idx}`} 
                className="conversation-item" onClick={()=>{
                    onPressItem(item);
                }}>
                    <div className="d-flex flex-row justify-content-between">
                    <div className="d-flex flex-column" style={{width:100}}>
                        <p>{item.name}</p>
                        <i style={{fontSize:8,marginTop:5}}>{item.lastmsgtime}</i>
                    </div>
                    <div className="d-flex flex-column">
                        <div className="reddot">{item.unreadmsgCount}</div>
                        <p>{`${item.lastmsg}`}</p>
                    </div>
                    </div>
                    </ListGroup.Item>)
            })}
        </ListGroup>
        </Container>)
}

ChatConversation.defaultProps = {
    conversationList:[
    ]
}

export default ChatConversation;

